<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>马鞍山非急救转运调度中心</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
    <style>
        :root {
            --primary-color: #1a5fb4;
            --secondary-color: #3584e4;
            --light-bg: #f8f9fa;
            --border-color: #e5e7eb;
            --success-color: #10b981;
            --warning-color: #f59e0b;
            --danger-color: #ef4444;
            --info-color: #3b82f6;
            --pending-color: #f59e0b;
            --assigned-color: #8b5cf6;
            --text-primary: #1f2937;
            --text-secondary: #6b7280;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background-color: #f9fafb;
            color: var(--text-primary);
            overflow-x: hidden;
        }
        
        .main-container {
            width: 100%;
            padding: 16px;
            max-width: none;
        }
        
        .page-header {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 16px;
            border: 1px solid var(--border-color);
        }
        
        .page-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 4px;
        }
        
        .page-subtitle {
            color: var(--text-secondary);
            font-size: 0.875rem;
        }
        
        .filter-section {
            background: white;
            border-radius: 8px;
            padding: 16px;
            margin-bottom: 16px;
            border: 1px solid var(--border-color);
        }
        
        .table-container {
            background: white;
            border-radius: 8px;
            border: 1px solid var(--border-color);
            position: relative;
            overflow: hidden;
        }
        
        .table-wrapper {
            position: relative;
            overflow-x: auto;
            max-height: 70vh;
            margin-right: 90px;
        }
        
        .order-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            min-width: 2000px;
        }
        
        .order-table thead th {
            background-color: #f9fafb;
            color: var(--text-secondary);
            font-weight: 500;
            padding: 12px 8px;
            border-bottom: 1px solid var(--border-color);
            position: sticky;
            top: 0;
            z-index: 10;
            white-space: nowrap;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .order-table tbody tr {
            transition: background-color 0.15s;
            border-bottom: 1px solid var(--border-color);
        }
        
        .order-table tbody tr:hover {
            background-color: #f9fafb;
        }
        
        .order-table tbody tr:last-child {
            border-bottom: none;
        }
        
        .order-table tbody td {
            padding: 12px 8px;
            vertical-align: middle;
            font-size: 0.875rem;
            white-space: nowrap;
            color: var(--text-primary);
        }
        
        .order-id {
            font-weight: 500;
            color: var(--primary-color);
        }
        
        .status-badge {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 500;
            display: inline-block;
            white-space: nowrap;
        }
        
        .status-pending {
            background-color: #fef3c7;
            color: #92400e;
        }
        
        .status-assigned {
            background-color: #ede9fe;
            color: #5b21b6;
        }
        
        .status-processing {
            background-color: #dbeafe;
            color: #1e40af;
        }
        
        .status-completed {
            background-color: #d1fae5;
            color: #065f46;
        }
        
        .status-cancelled {
            background-color: #fee2e2;
            color: #991b1b;
        }
        
        .action-btn {
            width: 32px;
            height: 32px;
            border-radius: 4px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: 1px solid var(--border-color);
            color: var(--text-secondary);
            transition: all 0.15s;
            margin: 0 2px;
            font-size: 0.875rem;
            cursor: pointer;
            flex-shrink: 0;
        }
        
        .action-btn:hover {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }
        
        .search-box {
            position: relative;
        }
        
        .search-box input {
            padding-left: 36px;
            border-radius: 6px;
            border: 1px solid var(--border-color);
            font-size: 0.875rem;
        }
        
        .search-box input:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(26, 95, 180, 0.1);
        }
        
        .search-box i {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-secondary);
            font-size: 0.875rem;
        }
        
        .filter-select {
            border-radius: 6px;
            border: 1px solid var(--border-color);
            font-size: 0.875rem;
        }
        
        .filter-select:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(26, 95, 180, 0.1);
        }
        
        .date-range {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .date-range input {
            border-radius: 6px;
            border: 1px solid var(--border-color);
            font-size: 0.875rem;
        }
        
        .date-range input:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(26, 95, 180, 0.1);
        }
        
        .date-range span {
            color: var(--text-secondary);
            font-size: 0.875rem;
        }
        
        .pagination-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px;
            border-top: 1px solid var(--border-color);
        }
        
        .pagination-info {
            color: var(--text-secondary);
            font-size: 0.875rem;
        }
        
        /* 简洁的统计卡片样式 */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px;
            margin-bottom: 16px;
        }
        
        .stats-card {
            background: white;
            border-radius: 8px;
            padding: 16px;
            border: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .stats-icon {
            width: 48px;
            height: 48px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
        }
        
        .stats-icon.primary {
            background-color: rgba(26, 95, 180, 0.1);
            color: var(--primary-color);
        }
        
        .stats-icon.pending {
            background-color: rgba(245, 158, 11, 0.1);
            color: var(--pending-color);
        }
        
        .stats-icon.assigned {
            background-color: rgba(139, 92, 246, 0.1);
            color: var(--assigned-color);
        }
        
        .stats-icon.processing {
            background-color: rgba(59, 130, 246, 0.1);
            color: var(--info-color);
        }
        
        .stats-icon.completed {
            background-color: rgba(16, 185, 129, 0.1);
            color: var(--success-color);
        }
        
        .stats-icon.revenue {
            background-color: rgba(107, 114, 128, 0.1);
            color: var(--text-secondary);
        }
        
        .stats-content h5 {
            font-size: 0.75rem;
            color: var(--text-secondary);
            margin-bottom: 4px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .stats-content .stats-number {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--text-primary);
            line-height: 1;
        }
        
        .location-info {
            font-size: 0.75rem;
            color: var(--text-secondary);
            max-width: 150px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .patient-info {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .patient-avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: var(--primary-color);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
            font-size: 0.75rem;
        }
        
        .patient-name {
            font-weight: 500;
            font-size: 0.875rem;
        }
        
        .patient-phone {
            font-size: 0.75rem;
            color: var(--text-secondary);
        }
        
        .price-tag {
            font-weight: 500;
            color: var(--text-primary);
        }
        
        .urgency-indicator {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 4px;
        }
        
        .urgency-high {
            background-color: var(--danger-color);
        }
        
        .urgency-medium {
            background-color: var(--warning-color);
        }
        
        .urgency-low {
            background-color: var(--success-color);
        }
        
        .tag {
            display: inline-block;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 0.7rem;
            margin-right: 4px;
            font-weight: 500;
        }
        
        .tag-yes {
            background-color: #d1fae5;
            color: #065f46;
        }
        
        .tag-no {
            background-color: #fee2e2;
            color: #991b1b;
        }
        
        .tag-male {
            background-color: #dbeafe;
            color: #1e40af;
        }
        
        .tag-female {
            background-color: #fce7f3;
            color: #9f1239;
        }
        
        .service-type {
            font-size: 0.75rem;
            padding: 2px 6px;
            border-radius: 4px;
            background-color: #f3f4f6;
            color: var(--text-secondary);
            font-weight: 500;
        }
        
        .driver-info {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .contact-btn {
            width: 24px;
            height: 24px;
            border-radius: 4px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: 1px solid var(--border-color);
            color: var(--text-secondary);
            transition: all 0.15s;
            font-size: 0.75rem;
            cursor: pointer;
        }
        
        .contact-btn:hover {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }
        
        /* 状态TAB样式 */
        .status-tabs {
            display: flex;
            border-bottom: 1px solid var(--border-color);
            background: white;
            border-radius: 8px 8px 0 0;
            padding: 0 16px;
        }
        
        .status-tab {
            padding: 12px 16px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.15s;
            font-weight: 500;
            color: var(--text-secondary);
            position: relative;
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.875rem;
        }
        
        .status-tab:hover {
            color: var(--primary-color);
            background-color: rgba(26, 95, 180, 0.04);
        }
        
        .status-tab.active {
            color: var(--primary-color);
            border-bottom: 2px solid var(--primary-color);
            font-weight: 600;
        }
        
        .status-tab .badge {
            background-color: #f3f4f6;
            color: var(--text-secondary);
            font-size: 0.75rem;
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: 500;
            min-width: 20px;
            text-align: center;
        }
        
        .status-tab.active .badge {
            background-color: var(--primary-color);
            color: white;
        }
        
        .status-tab i {
            font-size: 1rem;
        }
        
        .filter-section {
            border-radius: 0 0 8px 8px;
            border-top: none;
        }
        
        /* 待分配和已分配的特殊样式 */
        .status-tab[data-status="pending"].active {
            border-bottom-color: var(--pending-color);
            color: var(--pending-color);
        }
        
        .status-tab[data-status="pending"].active .badge {
            background-color: var(--pending-color);
        }
        
        .status-tab[data-status="assigned"].active {
            border-bottom-color: var(--assigned-color);
            color: var(--assigned-color);
        }
        
        .status-tab[data-status="assigned"].active .badge {
            background-color: var(--assigned-color);
        }
        
        /* 冻结操作列样式 */
        .frozen-actions {
            position: absolute;
            right: 0;
            top: 0;
            width: 90px;
            background: white;
            border-left: 1px solid var(--border-color);
            z-index: 20;
        }
        
        .frozen-actions thead th {
            background-color: #f9fafb;
            color: var(--text-secondary);
            font-weight: 500;
            padding: 12px 8px;
            border-bottom: 1px solid var(--border-color);
            position: sticky;
            top: 0;
            z-index: 21;
            white-space: nowrap;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            text-align: center;
        }
        
        .frozen-actions tbody td {
            padding: 12px 8px;
            border-bottom: 1px solid var(--border-color);
            vertical-align: middle;
            font-size: 0.875rem;
            text-align: center;
            background: white;
            white-space: nowrap;
        }
        
        .frozen-actions tbody tr:hover td {
            background-color: #f9fafb;
        }
        
        .frozen-actions table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
        }
        
        .action-buttons-container {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 4px;
            flex-wrap: nowrap;
        }
        
        /* 分配模态框样式 */
        .assignment-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }
        
        .assignment-modal.show {
            display: flex;
        }
        
        .modal-content {
            background: white;
            border-radius: 8px;
            width: 600px;
            max-width: 90%;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 0 10px 25px rgba(0,0,0,0.15);
        }
        
        .modal-header {
            padding: 20px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .modal-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--text-primary);
        }
        
        .modal-close {
            background: none;
            border: none;
            font-size: 1.5rem;
            color: var(--text-secondary);
            cursor: pointer;
            padding: 4px;
            border-radius: 4px;
            transition: all 0.15s;
        }
        
        .modal-close:hover {
            background-color: #f3f4f6;
            color: var(--text-primary);
        }
        
        .modal-body {
            padding: 20px;
        }
        
        .assignment-section {
            margin-bottom: 24px;
        }
        
        .assignment-section h5 {
            font-weight: 600;
            margin-bottom: 12px;
            color: var(--text-primary);
            font-size: 1rem;
        }
        
        .vehicle-option, .staff-option {
            padding: 12px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            margin-bottom: 8px;
            cursor: pointer;
            transition: all 0.15s;
        }
        
        .vehicle-option:hover, .staff-option:hover {
            border-color: var(--primary-color);
            background-color: rgba(26, 95, 180, 0.04);
        }
        
        .vehicle-option.selected, .staff-option.selected {
            border-color: var(--primary-color);
            background-color: rgba(26, 95, 180, 0.08);
        }
        
        .option-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 6px;
        }
        
        .option-title {
            font-weight: 500;
            color: var(--text-primary);
        }
        
        .option-status {
            font-size: 0.75rem;
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: 500;
        }
        
        .status-available {
            background-color: #d1fae5;
            color: #065f46;
        }
        
        .status-busy {
            background-color: #fef3c7;
            color: #92400e;
        }
        
        .option-details {
            font-size: 0.875rem;
            color: var(--text-secondary);
        }
        
        .modal-footer {
            padding: 20px;
            border-top: 1px solid var(--border-color);
            display: flex;
            justify-content: flex-end;
            gap: 8px;
        }
        
        .btn {
            padding: 8px 16px;
            border-radius: 6px;
            font-size: 0.875rem;
            font-weight: 500;
            transition: all 0.15s;
            cursor: pointer;
            border: 1px solid transparent;
        }
        
        .btn-primary {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }
        
        .btn-primary:hover {
            background-color: var(--secondary-color);
            border-color: var(--secondary-color);
        }
        
        .btn-secondary {
            background-color: #f3f4f6;
            color: var(--text-secondary);
            border-color: var(--border-color);
        }
        
        .btn-secondary:hover {
            background-color: #e5e7eb;
            color: var(--text-primary);
        }
        
        .btn-outline-primary {
            background-color: transparent;
            color: var(--primary-color);
            border-color: var(--primary-color);
        }
        
        .btn-outline-primary:hover {
            background-color: var(--primary-color);
            color: white;
        }
        
        .form-label {
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--text-primary);
            margin-bottom: 6px;
        }
        
        .form-control {
            font-size: 0.875rem;
        }
        
        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(26, 95, 180, 0.1);
        }
    </style>
</head>
<body style="margin: 0; padding: 0; font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;" class="bg-gray-50">
    <!-- 顶部标题栏 -->
    <header style="background: linear-gradient(135deg, #3B82F6 0%, #1E40AF 100%);" class="text-white py-2.5 px-6 shadow-xl">
        <div class="flex justify-between items-center">
            <div class="flex-1"></div>
            <h1 class="text-3xl font-bold flex-1 text-center tracking-wide">01订单管理</h1>
            <div class="flex-1 flex justify-end items-center space-x-4">
                <div style="background: rgba(255, 255, 255, 0.2);" class="flex items-center space-x-3 px-4 py-2 rounded-full backdrop-blur-sm">
                    <i class="fas fa-user-circle text-xl"></i>
                    <span class="font-medium">调度员 张晓丽</span>
                </div>
                <button style="transition: all 0.3s ease;" class="text-white hover:bg-white/20 p-3 rounded-full transition-all duration-300 hover:rotate-90">
                    <i class="fas fa-cog text-xl"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- 导航栏 -->
    <nav style="background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2);" class="shadow-lg sticky top-0 z-50">
        <div class="flex justify-center">
            <a href="#" class="nav-item px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden;" onmouseover="this.style.background='linear-gradient(180deg, rgba(59, 130, 246, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%)'; this.style.transform='translateY(-1px)'; this.querySelector('i').style.transform='scale(1.1)';" onmouseout="this.style.background=''; this.style.transform=''; this.querySelector('i').style.transform='';">
                <i class="fas fa-th-large text-lg" style="transition: all 0.3s ease;"></i>
                <span>调度中心</span>
            </a>
            <a href="#" class="nav-item active px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; color: #3B82F6; font-weight: 600;">
                <i class="fas fa-clipboard-list text-lg" style="transition: all 0.3s ease;"></i>
                <span>订单管理</span>
                <span style="content: ''; position: absolute; bottom: 0; left: 50%; width: 80%; height: 3px; background: linear-gradient(90deg, #3B82F6, #1E40AF); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform: translateX(-50%);"></span>
            </a>
            <a href="#" class="nav-item px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden;" onmouseover="this.style.background='linear-gradient(180deg, rgba(59, 130, 246, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%)'; this.style.transform='translateY(-1px)'; this.querySelector('i').style.transform='scale(1.1)';" onmouseout="this.style.background=''; this.style.transform=''; this.querySelector('i').style.transform='';">
                <i class="fas fa-users text-lg" style="transition: all 0.3s ease;"></i>
                <span>人员管理</span>
            </a>
            <a href="#" class="nav-item px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden;" onmouseover="this.style.background='linear-gradient(180deg, rgba(59, 130, 246, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%)'; this.style.transform='translateY(-1px)'; this.querySelector('i').style.transform='scale(1.1)';" onmouseout="this.style.background=''; this.style.transform=''; this.querySelector('i').style.transform='';">
                <i class="fas fa-ambulance text-lg" style="transition: all 0.3s ease;"></i>
                <span>车辆管理</span>
            </a>
            <a href="#" class="nav-item px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden;" onmouseover="this.style.background='linear-gradient(180deg, rgba(59, 130, 246, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%)'; this.style.transform='translateY(-1px)'; this.querySelector('i').style.transform='scale(1.1)';" onmouseout="this.style.background=''; this.style.transform=''; this.querySelector('i').style.transform='';">
                <i class="fas fa-truck text-lg" style="transition: all 0.3s ease;"></i>
                <span>车辆状态</span>
            </a>
            <a href="#" class="nav-item px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden;" onmouseover="this.style.background='linear-gradient(180deg, rgba(59, 130, 246, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%)'; this.style.transform='translateY(-1px)'; this.querySelector('i').style.transform='scale(1.1)';" onmouseout="this.style.background=''; this.style.transform=''; this.querySelector('i').style.transform='';">
                <i class="fas fa-map-marked-alt text-lg" style="transition: all 0.3s ease;"></i>
                <span>实时监控</span>
            </a>
            <a href="#" class="nav-item px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden;" onmouseover="this.style.background='linear-gradient(180deg, rgba(59, 130, 246, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%)'; this.style.transform='translateY(-1px)'; this.querySelector('i').style.transform='scale(1.1)';" onmouseout="this.style.background=''; this.style.transform=''; this.querySelector('i').style.transform='';">
                <i class="fas fa-coins text-lg" style="transition: all 0.3s ease;"></i>
                <span>财务管理</span>
            </a>
        </div>
    </nav>

    <div class="main-container">
        <!-- 页面标题 -->
        <div class="page-header">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <h1 class="page-title">订单管理</h1>
                    <p class="page-subtitle">管理和跟踪所有转运订单</p>
                </div>
                <div class="col-md-6 text-md-end mt-3 mt-md-0">
                    <button class="btn btn-primary me-2">
                        <i class="bi bi-download me-2"></i>导出订单
                    </button>
                    <button class="btn btn-outline-primary">
                        <i class="bi bi-printer me-2"></i>打印列表
                    </button>
                </div>
            </div>
        </div>

        <!-- 统计卡片 -->
        <div class="stats-grid">
            <div class="stats-card">
                <div class="stats-icon primary">
                    <i class="bi bi-calendar-day"></i>
                </div>
                <div class="stats-content">
                    <h5>今日订单</h5>
                    <div class="stats-number">24</div>
                </div>
            </div>
            <div class="stats-card">
                <div class="stats-icon pending">
                    <i class="bi bi-hourglass-split"></i>
                </div>
                <div class="stats-content">
                    <h5>待分配</h5>
                    <div class="stats-number">12</div>
                </div>
            </div>
            <div class="stats-card">
                <div class="stats-icon assigned">
                    <i class="bi bi-person-check"></i>
                </div>
                <div class="stats-content">
                    <h5>已分配</h5>
                    <div class="stats-number">8</div>
                </div>
            </div>
            <div class="stats-card">
                <div class="stats-icon processing">
                    <i class="bi bi-arrow-repeat"></i>
                </div>
                <div class="stats-content">
                    <h5>进行中</h5>
                    <div class="stats-number">8</div>
                </div>
            </div>
            <div class="stats-card">
                <div class="stats-icon completed">
                    <i class="bi bi-check-circle"></i>
                </div>
                <div class="stats-content">
                    <h5>已完成</h5>
                    <div class="stats-number">156</div>
                </div>
            </div>
            <div class="stats-card">
                <div class="stats-icon revenue">
                    <i class="bi bi-currency-yen"></i>
                </div>
                <div class="stats-content">
                    <h5>本月收入</h5>
                    <div class="stats-number">¥128.5K</div>
                </div>
            </div>
        </div>

        <!-- 状态TAB -->
        <div class="status-tabs">
            <div class="status-tab active" data-status="all">
                <i class="bi bi-list-ul"></i>
                全部订单
                <span class="badge">156</span>
            </div>
            <div class="status-tab" data-status="pending">
                <i class="bi bi-hourglass-split"></i>
                待分配
                <span class="badge">12</span>
            </div>
            <div class="status-tab" data-status="assigned">
                <i class="bi bi-person-check"></i>
                已分配
                <span class="badge">8</span>
            </div>
            <div class="status-tab" data-status="processing">
                <i class="bi bi-arrow-repeat"></i>
                进行中
                <span class="badge">8</span>
            </div>
            <div class="status-tab" data-status="completed">
                <i class="bi bi-check-circle"></i>
                已完成
                <span class="badge">120</span>
            </div>
            <div class="status-tab" data-status="cancelled">
                <i class="bi bi-x-circle"></i>
                已取消
                <span class="badge">4</span>
            </div>
        </div>

        <!-- 筛选区域 -->
        <div class="filter-section">
            <div class="row align-items-end">
                <div class="col-md-3">
                    <label class="form-label">搜索订单</label>
                    <div class="search-box">
                        <i class="bi bi-search"></i>
                        <input type="text" class="form-control" placeholder="订单编号、患者姓名或电话">
                    </div>
                </div>
                <div class="col-md-2">
                    <label class="form-label">用车目的</label>
                    <select class="form-select filter-select">
                        <option value="">全部类型</option>
                        <option value="出院">出院</option>
                        <option value="转院">转院</option>
                        <option value="入院">入院</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">预约时间</label>
                    <div class="date-range">
                        <input type="date" class="form-control">
                        <span>至</span>
                        <input type="date" class="form-control">
                    </div>
                </div>
                <div class="col-md-2">
                    <label class="form-label">订单来源</label>
                    <select class="form-select filter-select">
                        <option value="">全部来源</option>
                        <option value="调度中心">调度中心</option>
                        <option value="电话录入">电话录入</option>
                        <option value="移动端订单">移动端订单</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <button class="btn btn-primary w-100">
                        <i class="bi bi-funnel me-2"></i>筛选
                    </button>
                </div>
            </div>
        </div>

        <!-- 订单表格 -->
        <div class="table-container">
            <div class="table-wrapper">
                <table class="order-table">
                    <thead>
                        <tr>
                            <th>订单编号</th>
                            <th>来源</th>
                            <th>用车目的</th>
                            <th>患者姓名</th>
                            <th>患者性别</th>
                            <th>患者确诊</th>
                            <th>独立行走</th>
                            <th>身份证号</th>
                            <th>联系电话</th>
                            <th>患者情况</th>
                            <th>联系人</th>
                            <th>与患者关系</th>
                            <th>家属陪同人数</th>
                            <th>起点</th>
                            <th>终点</th>
                            <th>预约时间</th>
                            <th>转运时间</th>
                            <th>护送类型</th>
                            <th>执行车辆</th>
                            <th>执行人员</th>
                            <th>驾驶员电话</th>
                            <th>预计距离</th>
                            <th>预计时间</th>
                            <th>行驶时间</th>
                            <th>里程次数</th>
                            <th>基础费用</th>
                            <th>距离费用</th>
                            <th>陪护费用</th>
                            <th>定金(30%)</th>
                            <th>待支付尾款</th>
                            <th>总费用</th>
                            <th>状态</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr data-status="completed">
                            <td class="order-id">AJS52131529168</td>
                            <td>调度中心</td>
                            <td>
                                <span class="urgency-indicator urgency-high"></span>转院
                            </td>
                            <td>
                                <div class="patient-info">
                                    <div class="patient-avatar">张</div>
                                    <div>
                                        <div class="patient-name">张晓利</div>
                                        <div class="patient-phone">183****5217</div>
                                    </div>
                                </div>
                            </td>
                            <td><span class="tag tag-male">男</span></td>
                            <td><span class="tag tag-yes">已确诊</span></td>
                            <td><span class="tag tag-yes">是</span></td>
                            <td>34052119636396382</td>
                            <td>183****5217</td>
                            <td title="右侧股骨颈骨折，需要进行髋关节置换手术。患者目前意识清醒，生命体征平稳，无出血，无过敏史。需要平车转运，途中需要持续监测血压和心率。">右侧股骨颈骨折...</td>
                            <td>李华</td>
                            <td>配偶</td>
                            <td>2</td>
                            <td>
                                <div class="location-info" title="安徽省马鞍山市花山区湖东路45号马鞍山市第一人民医院">
                                    马鞍山市第一人民医院
                                </div>
                            </td>
                            <td>
                                <div class="location-info" title="江苏省南京市鼓楼区中山路321号南京市鼓楼医院">
                                    南京市鼓楼医院
                                </div>
                            </td>
                            <td>2025-01-28 15:09</td>
                            <td>2025-06-28 14:55</td>
                            <td><span class="service-type">普通护送</span></td>
                            <td>皖E584552</td>
                            <td>张晓利</td>
                            <td>
                                <div class="driver-info">
                                    13812344321
                                    <button class="contact-btn">
                                        <i class="bi bi-telephone-fill"></i>
                                    </button>
                                </div>
                            </td>
                            <td>18.3公里</td>
                            <td>41分钟</td>
                            <td>41分钟</td>
                            <td>1次</td>
                            <td>¥300</td>
                            <td>¥300</td>
                            <td>¥700</td>
                            <td>¥300</td>
                            <td>¥1000</td>
                            <td class="price-tag">¥1300</td>
                            <td><span class="status-badge status-completed">已完成</span></td>
                        </tr>
                        <tr data-status="processing">
                            <td class="order-id">AJS52131529169</td>
                            <td>移动端订单</td>
                            <td>
                                <span class="urgency-indicator urgency-low"></span>出院
                            </td>
                            <td>
                                <div class="patient-info">
                                    <div class="patient-avatar">王</div>
                                    <div>
                                        <div class="patient-name">王秀英</div>
                                        <div class="patient-phone">139****8866</div>
                                    </div>
                                </div>
                            </td>
                            <td><span class="tag tag-female">女</span></td>
                            <td><span class="tag tag-yes">已确诊</span></td>
                            <td><span class="tag tag-no">否</span></td>
                            <td>34052119552345678</td>
                            <td>139****8866</td>
                            <td title="冠心病康复期，需要轮椅转运，途中需要吸氧">冠心病康复期...</td>
                            <td>王小明</td>
                            <td>儿子</td>
                            <td>1</td>
                            <td>
                                <div class="location-info" title="马鞍山市中医院">
                                    马鞍山市中医院
                                </div>
                            </td>
                            <td>
                                <div class="location-info" title="马鞍山市花山区幸福路88号">
                                    花山区幸福路88号
                                </div>
                            </td>
                            <td>2025-06-29 09:30</td>
                            <td>2025-06-29 10:00</td>
                            <td><span class="service-type">高级陪护</span></td>
                            <td>皖E584553</td>
                            <td>李建国</td>
                            <td>
                                <div class="driver-info">
                                    13956789012
                                    <button class="contact-btn">
                                        <i class="bi bi-telephone-fill"></i>
                                    </button>
                                </div>
                            </td>
                            <td>12.5公里</td>
                            <td>30分钟</td>
                            <td>28分钟</td>
                            <td>1次</td>
                            <td>¥300</td>
                            <td>¥125</td>
                            <td>¥900</td>
                            <td>¥398</td>
                            <td>¥927</td>
                            <td class="price-tag">¥1325</td>
                            <td><span class="status-badge status-processing">进行中</span></td>
                        </tr>
                        <tr data-status="pending">
                            <td class="order-id">AJS52131529170</td>
                            <td>电话录入</td>
                            <td>
                                <span class="urgency-indicator urgency-medium"></span>入院
                            </td>
                            <td>
                                <div class="patient-info">
                                    <div class="patient-avatar">李</div>
                                    <div>
                                        <div class="patient-name">李建国</div>
                                        <div class="patient-phone">156****3321</div>
                                    </div>
                                </div>
                            </td>
                            <td><span class="tag tag-male">男</span></td>
                            <td><span class="tag tag-no">未确诊</span></td>
                            <td><span class="tag tag-yes">是</span></td>
                            <td>34052119601234567</td>
                            <td>156****3321</td>
                            <td title="疑似脑梗，需要紧急入院检查">疑似脑梗...</td>
                            <td>李美华</td>
                            <td>女儿</td>
                            <td>3</td>
                            <td>
                                <div class="location-info" title="马鞍山市雨山区红旗路66号">
                                    雨山区红旗路66号
                                </div>
                            </td>
                            <td>
                                <div class="location-info" title="马鞍山市人民医院">
                                    马鞍山市人民医院
                                </div>
                            </td>
                            <td>2025-06-29 14:00</td>
                            <td>-</td>
                            <td><span class="service-type">普通护送</span></td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                            <td>8.2公里</td>
                            <td>20分钟</td>
                            <td>-</td>
                            <td>-</td>
                            <td>¥300</td>
                            <td>¥82</td>
                            <td>¥400</td>
                            <td>¥234</td>
                            <td>¥548</td>
                            <td class="price-tag">¥782</td>
                            <td><span class="status-badge status-pending">待分配</span></td>
                        </tr>
                        <tr data-status="completed">
                            <td class="order-id">AJS52131529171</td>
                            <td>调度中心</td>
                            <td>
                                <span class="urgency-indicator urgency-high"></span>转院
                            </td>
                            <td>
                                <div class="patient-info">
                                    <div class="patient-avatar">陈</div>
                                    <div>
                                        <div class="patient-name">陈丽华</div>
                                        <div class="patient-phone">188****5544</div>
                                    </div>
                                </div>
                            </td>
                            <td><span class="tag tag-female">女</span></td>
                            <td><span class="tag tag-yes">已确诊</span></td>
                            <td><span class="tag tag-no">否</span></td>
                            <td>34052119652345678</td>
                            <td>188****5544</td>
                            <td title="肺癌晚期，需要转院进行化疗">肺癌晚期...</td>
                            <td>陈强</td>
                            <td>儿子</td>
                            <td>2</td>
                            <td>
                                <div class="location-info" title="马鞍山市第一人民医院">
                                    马鞍山市第一人民医院
                                </div>
                            </td>
                            <td>
                                <div class="location-info" title="南京市第一医院">
                                    南京市第一医院
                                </div>
                            </td>
                            <td>2025-06-28 16:30</td>
                            <td>2025-06-28 17:00</td>
                            <td><span class="service-type">高级陪护</span></td>
                            <td>皖E584554</td>
                            <td>王志明</td>
                            <td>
                                <div class="driver-info">
                                    13678901234
                                    <button class="contact-btn">
                                        <i class="bi bi-telephone-fill"></i>
                                    </button>
                                </div>
                            </td>
                            <td>65.8公里</td>
                            <td>90分钟</td>
                            <td>85分钟</td>
                            <td>1次</td>
                            <td>¥300</td>
                            <td>¥658</td>
                            <td>¥1200</td>
                            <td>¥647</td>
                            <td>¥1511</td>
                            <td class="price-tag">¥2158</td>
                            <td><span class="status-badge status-completed">已完成</span></td>
                        </tr>
                        <tr data-status="processing">
                            <td class="order-id">AJS52131529172</td>
                            <td>移动端订单</td>
                            <td>
                                <span class="urgency-indicator urgency-low"></span>出院
                            </td>
                            <td>
                                <div class="patient-info">
                                    <div class="patient-avatar">赵</div>
                                    <div>
                                        <div class="patient-name">赵文静</div>
                                        <div class="patient-phone">135****7788</div>
                                    </div>
                                </div>
                            </td>
                            <td><span class="tag tag-female">女</span></td>
                            <td><span class="tag tag-yes">已确诊</span></td>
                            <td><span class="tag tag-yes">是</span></td>
                            <td>34052119782345678</td>
                            <td>135****7788</td>
                            <td title="正常分娩康复，可独立行走">正常分娩康复...</td>
                            <td>赵志明</td>
                            <td>丈夫</td>
                            <td>2</td>
                            <td>
                                <div class="location-info" title="马鞍山市妇幼保健院">
                                    马鞍山市妇幼保健院
                                </div>
                            </td>
                            <td>
                                <div class="location-info" title="马鞍山市花山区解放路128号">
                                    花山区解放路128号
                                </div>
                            </td>
                            <td>2025-06-29 11:00</td>
                            <td>2025-06-29 11:30</td>
                            <td><span class="service-type">普通护送</span></td>
                            <td>皖E584555</td>
                            <td>刘强</td>
                            <td>
                                <div class="driver-info">
                                    13789012345
                                    <button class="contact-btn">
                                        <i class="bi bi-telephone-fill"></i>
                                    </button>
                                </div>
                            </td>
                            <td>15.3公里</td>
                            <td>35分钟</td>
                            <td>32分钟</td>
                            <td>1次</td>
                            <td>¥300</td>
                            <td>¥153</td>
                            <td>¥400</td>
                            <td>¥256</td>
                            <td>¥597</td>
                            <td class="price-tag">¥853</td>
                            <td><span class="status-badge status-processing">进行中</span></td>
                        </tr>
                        <tr data-status="assigned">
                            <td class="order-id">AJS52131529173</td>
                            <td>电话录入</td>
                            <td>
                                <span class="urgency-indicator urgency-medium"></span>入院
                            </td>
                            <td>
                                <div class="patient-info">
                                    <div class="patient-avatar">孙</div>
                                    <div>
                                        <div class="patient-name">孙德明</div>
                                        <div class="patient-phone">159****9966</div>
                                    </div>
                                </div>
                            </td>
                            <td><span class="tag tag-male">男</span></td>
                            <td><span class="tag tag-no">未确诊</span></td>
                            <td><span class="tag tag-yes">是</span></td>
                            <td>34052119452345678</td>
                            <td>159****9966</td>
                            <td title="胸痛待查，需要入院进一步检查">胸痛待查...</td>
                            <td>孙晓燕</td>
                            <td>女儿</td>
                            <td>1</td>
                            <td>
                                <div class="location-info" title="马鞍山市博望区新市镇">
                                    博望区新市镇
                                </div>
                            </td>
                            <td>
                                <div class="location-info" title="马鞍山市人民医院">
                                    马鞍山市人民医院
                                </div>
                            </td>
                            <td>2025-06-30 08:30</td>
                            <td>2025-06-30 09:00</td>
                            <td><span class="service-type">普通护送</span></td>
                            <td>皖E584557</td>
                            <td>王明</td>
                            <td>
                                <div class="driver-info">
                                    13923456789
                                    <button class="contact-btn">
                                        <i class="bi bi-telephone-fill"></i>
                                    </button>
                                </div>
                            </td>
                            <td>25.6公里</td>
                            <td>45分钟</td>
                            <td>-</td>
                            <td>-</td>
                            <td>¥300</td>
                            <td>¥256</td>
                            <td>¥400</td>
                            <td>¥287</td>
                            <td>¥669</td>
                            <td class="price-tag">¥956</td>
                            <td><span class="status-badge status-assigned">已分配</span></td>
                        </tr>
                        <tr data-status="cancelled">
                            <td class="order-id">AJS52131529174</td>
                            <td>调度中心</td>
                            <td>
                                <span class="urgency-indicator urgency-high"></span>转院
                            </td>
                            <td>
                                <div class="patient-info">
                                    <div class="patient-avatar">周</div>
                                    <div>
                                        <div class="patient-name">周美玲</div>
                                        <div class="patient-phone">137****2233</div>
                                    </div>
                                </div>
                            </td>
                            <td><span class="tag tag-female">女</span></td>
                            <td><span class="tag tag-yes">已确诊</span></td>
                            <td><span class="tag tag-no">否</span></td>
                            <td>34052119682345678</td>
                            <td>137****2233</td>
                            <td title="急性心肌梗死，需要转院进行介入治疗">急性心肌梗死...</td>
                            <td>周志强</td>
                            <td>儿子</td>
                            <td>2</td>
                            <td>
                                <div class="location-info" title="马鞍山市中医院">
                                    马鞍山市中医院
                                </div>
                            </td>
                            <td>
                                <div class="location-info" title="安徽省立医院">
                                    安徽省立医院
                                </div>
                            </td>
                            <td>2025-06-27 10:15</td>
                            <td>-</td>
                            <td><span class="service-type">高级陪护</span></td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                            <td>120.5公里</td>
                            <td>150分钟</td>
                            <td>-</td>
                            <td>-</td>
                            <td>¥300</td>
                            <td>¥1205</td>
                            <td>¥1500</td>
                            <td>¥902</td>
                            <td>¥2103</td>
                            <td class="price-tag">¥3005</td>
                            <td><span class="status-badge status-cancelled">已取消</span></td>
                        </tr>
                        <tr data-status="completed">
                            <td class="order-id">AJS52131529175</td>
                            <td>移动端订单</td>
                            <td>
                                <span class="urgency-indicator urgency-low"></span>出院
                            </td>
                            <td>
                                <div class="patient-info">
                                    <div class="patient-avatar">吴</div>
                                    <div>
                                        <div class="patient-name">吴秀芳</div>
                                        <div class="patient-phone">186****4455</div>
                                    </div>
                                </div>
                            </td>
                            <td><span class="tag tag-female">女</span></td>
                            <td><span class="tag tag-yes">已确诊</span></td>
                            <td><span class="tag tag-yes">是</span></td>
                            <td>34052119562345678</td>
                            <td>186****4455</td>
                            <td title="高血压控制良好，可独立行走">高血压控制良好...</td>
                            <td>吴建国</td>
                            <td>丈夫</td>
                            <td>1</td>
                            <td>
                                <div class="location-info" title="马鞍山市第一人民医院">
                                    马鞍山市第一人民医院
                                </div>
                            </td>
                            <td>
                                <div class="location-info" title="马鞍山市雨山区春晖家园">
                                    雨山区春晖家园
                                </div>
                            </td>
                            <td>2025-06-29 15:45</td>
                            <td>2025-06-29 16:00</td>
                            <td><span class="service-type">普通护送</span></td>
                            <td>皖E584556</td>
                            <td>张伟</td>
                            <td>
                                <div class="driver-info">
                                    13890123456
                                    <button class="contact-btn">
                                        <i class="bi bi-telephone-fill"></i>
                                    </button>
                                </div>
                            </td>
                            <td>10.2公里</td>
                            <td>25分钟</td>
                            <td>23分钟</td>
                            <td>1次</td>
                            <td>¥300</td>
                            <td>¥102</td>
                            <td>¥300</td>
                            <td>¥211</td>
                            <td>¥491</td>
                            <td class="price-tag">¥702</td>
                            <td><span class="status-badge status-completed">已完成</span></td>
                        </tr>
                        <tr data-status="pending">
                            <td class="order-id">AJS52131529176</td>
                            <td>移动端订单</td>
                            <td>
                                <span class="urgency-indicator urgency-high"></span>转院
                            </td>
                            <td>
                                <div class="patient-info">
                                    <div class="patient-avatar">郑</div>
                                    <div>
                                        <div class="patient-name">郑大海</div>
                                        <div class="patient-phone">134****1122</div>
                                    </div>
                                </div>
                            </td>
                            <td><span class="tag tag-male">男</span></td>
                            <td><span class="tag tag-yes">已确诊</span></td>
                            <td><span class="tag tag-no">否</span></td>
                            <td>34052119702345678</td>
                            <td>134****1122</td>
                            <td title="脑出血后遗症，需要转院康复治疗">脑出血后遗症...</td>
                            <td>郑小梅</td>
                            <td>女儿</td>
                            <td>2</td>
                            <td>
                                <div class="location-info" title="马鞍山市人民医院">
                                    马鞍山市人民医院
                                </div>
                            </td>
                            <td>
                                <div class="location-info" title="南京脑科医院">
                                    南京脑科医院
                                </div>
                            </td>
                            <td>2025-06-30 10:00</td>
                            <td>-</td>
                            <td><span class="service-type">高级陪护</span></td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                            <td>95.2公里</td>
                            <td>120分钟</td>
                            <td>-</td>
                            <td>-</td>
                            <td>¥300</td>
                            <td>¥952</td>
                            <td>¥1200</td>
                            <td>¥736</td>
                            <td>¥1716</td>
                            <td class="price-tag">¥2452</td>
                            <td><span class="status-badge status-pending">待分配</span></td>
                        </tr>
                        <tr data-status="assigned">
                            <td class="order-id">AJS52131529177</td>
                            <td>调度中心</td>
                            <td>
                                <span class="urgency-indicator urgency-low"></span>出院
                            </td>
                            <td>
                                <div class="patient-info">
                                    <div class="patient-avatar">马</div>
                                    <div>
                                        <div class="patient-name">马秀兰</div>
                                        <div class="patient-phone">158****3344</div>
                                    </div>
                                </div>
                            </td>
                            <td><span class="tag tag-female">女</span></td>
                            <td><span class="tag tag-yes">已确诊</span></td>
                            <td><span class="tag tag-yes">是</span></td>
                            <td>34052119632345678</td>
                            <td>158****3344</td>
                            <td title="糖尿病足治疗康复，可独立行走">糖尿病足治疗...</td>
                            <td>马强</td>
                            <td>儿子</td>
                            <td>1</td>
                            <td>
                                <div class="location-info" title="马鞍山市中医院">
                                    马鞍山市中医院
                                </div>
                            </td>
                            <td>
                                <div class="location-info" title="马鞍山市花山区红旗路22号">
                                    花山区红旗路22号
                                </div>
                            </td>
                            <td>2025-06-30 13:30</td>
                            <td>2025-06-30 14:00</td>
                            <td><span class="service-type">普通护送</span></td>
                            <td>皖E584558</td>
                            <td>赵军</td>
                            <td>
                                <div class="driver-info">
                                    13634567890
                                    <button class="contact-btn">
                                        <i class="bi bi-telephone-fill"></i>
                                    </button>
                                </div>
                            </td>
                            <td>7.8公里</td>
                            <td>18分钟</td>
                            <td>-</td>
                            <td>-</td>
                            <td>¥300</td>
                            <td>¥78</td>
                            <td>¥300</td>
                            <td>¥203</td>
                            <td>¥475</td>
                            <td class="price-tag">¥678</td>
                            <td><span class="status-badge status-assigned">已分配</span></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <!-- 冻结的操作列 -->
            <div class="frozen-actions">
                <table>
                    <thead>
                        <tr>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr data-status="completed">
                            <td>
                                <div class="action-buttons-container">
                                    <button class="action-btn" title="查看详情">
                                        <i class="bi bi-eye"></i>
                                    </button>
                                    <button class="action-btn" title="编辑">
                                        <i class="bi bi-pencil"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        <tr data-status="processing">
                            <td>
                                <div class="action-buttons-container">
                                    <button class="action-btn" title="查看详情">
                                        <i class="bi bi-eye"></i>
                                    </button>
                                    <button class="action-btn" title="编辑">
                                        <i class="bi bi-pencil"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        <tr data-status="pending">
                            <td>
                                <div class="action-buttons-container">
                                    <button class="action-btn" title="查看详情">
                                        <i class="bi bi-eye"></i>
                                    </button>
                                    <button class="action-btn assign-btn" title="分配人员车辆">
                                        <i class="bi bi-people-fill"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        <tr data-status="completed">
                            <td>
                                <div class="action-buttons-container">
                                    <button class="action-btn" title="查看详情">
                                        <i class="bi bi-eye"></i>
                                    </button>
                                    <button class="action-btn" title="编辑">
                                        <i class="bi bi-pencil"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        <tr data-status="processing">
                            <td>
                                <div class="action-buttons-container">
                                    <button class="action-btn" title="查看详情">
                                        <i class="bi bi-eye"></i>
                                    </button>
                                    <button class="action-btn" title="编辑">
                                        <i class="bi bi-pencil"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        <tr data-status="assigned">
                            <td>
                                <div class="action-buttons-container">
                                    <button class="action-btn" title="查看详情">
                                        <i class="bi bi-eye"></i>
                                    </button>
                                    <button class="action-btn start-btn" title="开始转运">
                                        <i class="bi bi-play-circle"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        <tr data-status="cancelled">
                            <td>
                                <div class="action-buttons-container">
                                    <button class="action-btn" title="查看详情">
                                        <i class="bi bi-eye"></i>
                                    </button>
                                    <button class="action-btn" title="编辑">
                                        <i class="bi bi-pencil"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        <tr data-status="completed">
                            <td>
                                <div class="action-buttons-container">
                                    <button class="action-btn" title="查看详情">
                                        <i class="bi bi-eye"></i>
                                    </button>
                                    <button class="action-btn" title="编辑">
                                        <i class="bi bi-pencil"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        <tr data-status="pending">
                            <td>
                                <div class="action-buttons-container">
                                    <button class="action-btn" title="查看详情">
                                        <i class="bi bi-eye"></i>
                                    </button>
                                    <button class="action-btn assign-btn" title="分配人员车辆">
                                        <i class="bi bi-people-fill"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        <tr data-status="assigned">
                            <td>
                                <div class="action-buttons-container">
                                    <button class="action-btn" title="查看详情">
                                        <i class="bi bi-eye"></i>
                                    </button>
                                    <button class="action-btn start-btn" title="开始转运">
                                        <i class="bi bi-play-circle"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- 分页 -->
            <div class="pagination-container">
                <div class="pagination-info">
                    显示 1-10 条，共 156 条记录
                </div>
                <nav>
                    <ul class="pagination mb-0">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" tabindex="-1">上一页</a>
                        </li>
                        <li class="page-item active"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>

    <!-- 分配模态框 -->
    <div class="assignment-modal" id="assignmentModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">分配人员车辆</h3>
                <button class="modal-close" onclick="closeAssignmentModal()">
                    <i class="bi bi-x"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="assignment-section">
                    <h5><i class="bi bi-truck me-2"></i>选择车辆</h5>
                    <div class="vehicle-option" data-vehicle="皖E584559">
                        <div class="option-header">
                            <div class="option-title">皖E584559</div>
                            <div class="option-status status-available">可用</div>
                        </div>
                        <div class="option-details">
                            车型：福田救护车 | 座位：4座 | 设备：呼吸机、除颤仪、心电监护
                        </div>
                    </div>
                    <div class="vehicle-option" data-vehicle="皖E584560">
                        <div class="option-header">
                            <div class="option-title">皖E584560</div>
                            <div class="option-status status-available">可用</div>
                        </div>
                        <div class="option-details">
                            车型：金杯救护车 | 座位：6座 | 设备：氧气瓶、担架、急救箱
                        </div>
                    </div>
                    <div class="vehicle-option" data-vehicle="皖E584561">
                        <div class="option-header">
                            <div class="option-title">皖E584561</div>
                            <div class="option-status status-busy">任务中</div>
                        </div>
                        <div class="option-details">
                            车型：依维柯救护车 | 座位：8座 | 设备：全套急救设备
                        </div>
                    </div>
                </div>
                
                <div class="assignment-section">
                    <h5><i class="bi bi-people me-2"></i>选择人员</h5>
                    <div class="staff-option" data-staff="张师傅,13811112222">
                        <div class="option-header">
                            <div class="option-title">张师傅</div>
                            <div class="option-status status-available">可用</div>
                        </div>
                        <div class="option-details">
                            驾龄：15年 | 电话：13811112222 | 证书：A1驾照、急救证
                        </div>
                    </div>
                    <div class="staff-option" data-staff="李护士,13933334444">
                        <div class="option-header">
                            <div class="option-title">李护士</div>
                            <div class="option-status status-available">可用</div>
                        </div>
                        <div class="option-details">
                            职称：主管护师 | 电话：13933334444 | 证书：护士执业证、急救证
                        </div>
                    </div>
                    <div class="staff-option" data-staff="王医生,13755556666">
                        <div class="option-header">
                            <div class="option-title">王医生</div>
                            <div class="option-status status-busy">任务中</div>
                        </div>
                        <div class="option-details">
                            职称：主治医师 | 电话：13755556666 | 证书：医师执业证、急救证
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" onclick="closeAssignmentModal()">取消</button>
                <button class="btn btn-primary" onclick="confirmAssignment()">
                    <i class="bi bi-check-circle me-2"></i>确认分配
                </button>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 状态TAB切换功能
            const statusTabs = document.querySelectorAll('.status-tab');
            const tableRows = document.querySelectorAll('.order-table tbody tr');
            const frozenRows = document.querySelectorAll('.frozen-actions tbody tr');
            
            statusTabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    statusTabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                    
                    const status = this.getAttribute('data-status');
                    
                    tableRows.forEach((row, index) => {
                        if (status === 'all') {
                            row.style.display = '';
                            frozenRows[index].style.display = '';
                        } else {
                            const rowStatus = row.getAttribute('data-status');
                            const display = rowStatus === status ? '' : 'none';
                            row.style.display = display;
                            frozenRows[index].style.display = display;
                        }
                    });
                    
                    updatePaginationInfo();
                });
            });
            
            // 搜索功能
            const searchInput = document.querySelector('.search-box input');
            searchInput.addEventListener('input', function() {
                const searchTerm = this.value.toLowerCase();
                const activeTab = document.querySelector('.status-tab.active');
                const activeStatus = activeTab.getAttribute('data-status');
                
                tableRows.forEach((row, index) => {
                    const text = row.textContent.toLowerCase();
                    const rowStatus = row.getAttribute('data-status');
                    
                    let showBySearch = text.includes(searchTerm);
                    let showByStatus = activeStatus === 'all' || rowStatus === activeStatus;
                    
                    const display = showBySearch && showByStatus ? '' : 'none';
                    row.style.display = display;
                    frozenRows[index].style.display = display;
                });
                
                updatePaginationInfo();
            });

            // 用车目的筛选
            const purposeSelect = document.querySelector('.filter-select');
            purposeSelect.addEventListener('change', function() {
                const purpose = this.value.toLowerCase();
                const activeTab = document.querySelector('.status-tab.active');
                const activeStatus = activeTab.getAttribute('data-status');
                
                tableRows.forEach((row, index) => {
                    const rowPurpose = row.cells[2].textContent.toLowerCase();
                    const rowStatus = row.getAttribute('data-status');
                    
                    let showByPurpose = !purpose || rowPurpose.includes(purpose);
                    let showByStatus = activeStatus === 'all' || rowStatus === activeStatus;
                    
                    const display = showByPurpose && showByStatus ? '' : 'none';
                    row.style.display = display;
                    frozenRows[index].style.display = display;
                });
                
                updatePaginationInfo();
            });

            // 订单来源筛选
            const sourceSelect = document.querySelectorAll('.filter-select')[1];
            sourceSelect.addEventListener('change', function() {
                const source = this.value.toLowerCase();
                const activeTab = document.querySelector('.status-tab.active');
                const activeStatus = activeTab.getAttribute('data-status');
                
                tableRows.forEach((row, index) => {
                    const rowSource = row.cells[1].textContent.toLowerCase();
                    const rowStatus = row.getAttribute('data-status');
                    
                    let showBySource = !source || rowSource.includes(source);
                    let showByStatus = activeStatus === 'all' || rowStatus === activeStatus;
                    
                    const display = showBySource && showByStatus ? '' : 'none';
                    row.style.display = display;
                    frozenRows[index].style.display = display;
                });
                
                updatePaginationInfo();
            });

            // 操作按钮事件
            document.querySelectorAll('.action-btn').forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    const icon = this.querySelector('i');
                    const row = this.closest('tr');
                    const index = Array.from(row.parentNode.children).indexOf(row);
                    const mainRow = tableRows[index];
                    
                    if (icon.classList.contains('bi-eye')) {
                        console.log('查看订单详情');
                    } else if (icon.classList.contains('bi-pencil')) {
                        console.log('编辑订单');
                    } else if (icon.classList.contains('bi-people-fill')) {
                        openAssignmentModal(mainRow);
                    } else if (icon.classList.contains('bi-play-circle')) {
                        mainRow.setAttribute('data-status', 'processing');
                        row.setAttribute('data-status', 'processing');
                        const statusBadge = mainRow.querySelector('.status-badge');
                        statusBadge.classList.remove('status-assigned');
                        statusBadge.classList.add('status-processing');
                        statusBadge.textContent = '进行中';
                        
                        this.classList.remove('bi-play-circle');
                        this.classList.add('bi-pencil');
                        this.setAttribute('title', '编辑');
                        
                        updateStatusCounts();
                    }
                });
            });

            // 行点击事件
            document.querySelectorAll('.order-table tbody tr').forEach(row => {
                row.addEventListener('click', function(e) {
                    if (e.target.closest('.action-btn')) {
                        return;
                    }
                    
                    document.querySelectorAll('.order-table tbody tr').forEach(r => {
                        r.style.backgroundColor = '';
                    });
                    this.style.backgroundColor = '#f9fafb';
                });
            });

            // 同步滚动
            const tableWrapper = document.querySelector('.table-wrapper');
            const frozenActions = document.querySelector('.frozen-actions');
            
            tableWrapper.addEventListener('scroll', function() {
                frozenActions.style.transform = `translateY(-${this.scrollTop}px)`;
            });

            // 更新分页信息
            function updatePaginationInfo() {
                const visibleRows = Array.from(tableRows).filter(row => row.style.display !== 'none');
                const totalRows = tableRows.length;
                const visibleCount = visibleRows.length;
                
                document.querySelector('.pagination-info').textContent = 
                    `显示 ${visibleCount > 0 ? 1 : 0}-${visibleCount} 条，共 ${totalRows} 条记录`;
            }

            // 更新状态计数
            function updateStatusCounts() {
                const counts = {
                    all: tableRows.length,
                    pending: 0,
                    assigned: 0,
                    processing: 0,
                    completed: 0,
                    cancelled: 0
                };
                
                tableRows.forEach(row => {
                    const status = row.getAttribute('data-status');
                    if (counts.hasOwnProperty(status)) {
                        counts[status]++;
                    }
                });
                
                statusTabs.forEach(tab => {
                    const status = tab.getAttribute('data-status');
                    const badge = tab.querySelector('.badge');
                    if (badge && counts.hasOwnProperty(status)) {
                        badge.textContent = counts[status];
                    }
                });
            }

            // 模拟实时更新订单状态
            setInterval(() => {
                const processingBadges = document.querySelectorAll('.status-processing');
                processingBadges.forEach(badge => {
                    if (Math.random() > 0.8) {
                        badge.classList.remove('status-processing');
                        badge.classList.add('status-completed');
                        badge.textContent = '已完成';
                        
                        const row = badge.closest('tr');
                        if (row) {
                            row.setAttribute('data-status', 'completed');
                            const index = Array.from(row.parentNode.children).indexOf(row);
                            frozenRows[index].setAttribute('data-status', 'completed');
                            updateStatusCounts();
                        }
                    }
                });
            }, 30000);
        });

        // 分配模态框功能
        function openAssignmentModal(row) {
            const modal = document.getElementById('assignmentModal');
            modal.classList.add('show');
            modal.dataset.rowIndex = Array.from(row.parentNode.children).indexOf(row);
            
            document.querySelectorAll('.vehicle-option, .staff-option').forEach(option => {
                option.classList.remove('selected');
            });
        }

        function closeAssignmentModal() {
            const modal = document.getElementById('assignmentModal');
            modal.classList.remove('show');
        }

        function confirmAssignment() {
            const modal = document.getElementById('assignmentModal');
            const rowIndex = modal.dataset.rowIndex;
            const selectedVehicle = document.querySelector('.vehicle-option.selected');
            const selectedStaff = document.querySelector('.staff-option.selected');
            
            if (!selectedVehicle || !selectedStaff) {
                alert('请选择车辆和人员');
                return;
            }
            
            const tableRows = document.querySelectorAll('.order-table tbody tr');
            const frozenRows = document.querySelectorAll('.frozen-actions tbody tr');
            const row = tableRows[rowIndex];
            const frozenRow = frozenRows[rowIndex];
            
            const vehicleInfo = selectedVehicle.dataset.vehicle;
            row.cells[18].textContent = vehicleInfo;
            
            const staffInfo = selectedStaff.dataset.staff;
            const [staffName, staffPhone] = staffInfo.split(',');
            row.cells[19].textContent = staffName;
            row.cells[20].innerHTML = `
                <div class="driver-info">
                    ${staffPhone}
                    <button class="contact-btn">
                        <i class="bi bi-telephone-fill"></i>
                    </button>
                </div>
            `;
            
            const now = new Date();
            const timeString = `${now.getFullYear()}-${String(now.getMonth()+1).padStart(2,'0')}-${String(now.getDate()).padStart(2,'0')} ${String(now.getHours()).padStart(2,'0')}:${String(now.getMinutes()).padStart(2,'0')}`;
            row.cells[16].textContent = timeString;
            
            row.setAttribute('data-status', 'assigned');
            frozenRow.setAttribute('data-status', 'assigned');
            const statusBadge = row.querySelector('.status-badge');
            statusBadge.classList.remove('status-pending');
            statusBadge.classList.add('status-assigned');
            statusBadge.textContent = '已分配';
            
            const assignBtn = frozenRow.querySelector('.assign-btn');
            if (assignBtn) {
                assignBtn.classList.remove('bi-people-fill');
                assignBtn.classList.add('bi-play-circle');
                assignBtn.classList.remove('assign-btn');
                assignBtn.classList.add('start-btn');
                assignBtn.setAttribute('title', '开始转运');
            }
            
            updateStatusCounts();
            closeAssignmentModal();
        }

        // 车辆选择
        document.querySelectorAll('.vehicle-option').forEach(option => {
            option.addEventListener('click', function() {
                if (this.querySelector('.option-status').textContent === '可用') {
                    document.querySelectorAll('.vehicle-option').forEach(o => o.classList.remove('selected'));
                    this.classList.add('selected');
                }
            });
        });

        // 人员选择
        document.querySelectorAll('.staff-option').forEach(option => {
            option.addEventListener('click', function() {
                if (this.querySelector('.option-status').textContent === '可用') {
                    document.querySelectorAll('.staff-option').forEach(o => o.classList.remove('selected'));
                    this.classList.add('selected');
                }
            });
        });

        // 导航栏切换
        document.querySelectorAll('.nav-item').forEach(item => {
            item.addEventListener('click', function(e) {
                e.preventDefault();
                
                // 移除所有活动状态
                document.querySelectorAll('.nav-item').forEach(nav => {
                    nav.classList.remove('active');
                    nav.style.color = '#374151';
                    nav.style.fontWeight = 'normal';
                    
                    // 移除底部指示条
                    const indicator = nav.querySelector('span:last-child');
                    if (indicator && indicator.style.background) {
                        indicator.style.background = '';
                        indicator.style.width = '0';
                    }
                });
                
                // 添加活动状态到当前项
                this.classList.add('active');
                this.style.color = '#3B82F6';
                this.style.fontWeight = '600';
                
                // 添加底部指示条
                let indicator = this.querySelector('span:last-child');
                if (!indicator || !indicator.style.background) {
                    indicator = document.createElement('span');
                    indicator.style.cssText = 'content: ""; position: absolute; bottom: 0; left: 50%; width: 80%; height: 3px; background: linear-gradient(90deg, #3B82F6, #1E40AF); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform: translateX(-50%);';
                    this.appendChild(indicator);
                }
            });
        });

        // 为所有非活动导航项添加悬停效果
        document.querySelectorAll('.nav-item:not(.active)').forEach(item => {
            item.addEventListener('mouseenter', function() {
                const indicator = document.createElement('span');
                indicator.style.cssText = 'content: ""; position: absolute; bottom: 0; left: 50%; width: 0; height: 3px; background: linear-gradient(90deg, #3B82F6, #1E40AF); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform: translateX(-50%);';
                indicator.classList.add('hover-indicator');
                this.appendChild(indicator);
                
                setTimeout(() => {
                    indicator.style.width = '80%';
                }, 10);
            });
            
            item.addEventListener('mouseleave', function() {
                const indicator = this.querySelector('.hover-indicator');
                if (indicator) {
                    indicator.style.width = '0';
                    setTimeout(() => {
                        if (indicator.parentNode) {
                            indicator.remove();
                        }
                    }, 300);
                }
            });
        });
    </script>
</body>
</html>